<template>
  <div id="points-apply">
    <div class="content-apply" v-loading="loading">
      <div class="header-title">{{type == 1?$t('member.points.apply.pointsToU') :$t('member.points.apply.uPoints') }}</div>
      <div class="apply-row">
        <div class="h3"> {{ $t('member.points.apply.exchangeRate') }}：
            {{type == 1?'1 CLP= '+(exchangeObj.redcredit_to_usdt_fee || 0)+$t('commons.symbol') :'1 '+$t('commons.symbol') +'='+(exchangeObj.usdt_to_stockcredit_fee || 0)+$t('member.points.apply.inventoryPoints') }}</div>
        <div class="row-box">
					<img src="@/assets/images/icon/icon_hauzhuan@2x.png" class="dui-icon" >
					<div class="row-wrap">
						<div class="row-l" v-if="type == 1">
							<img src="@/assets/images/icon/picresour_icon_01.png" class="icon-l" >
							<div class="row-name">CLP</div>
						</div>
						<div class="row-l">
							<img src="@/assets/images/icon/picresour_icon_02.png" class="icon-l" >
							<div class="row-name"> {{ $t('commons.symbol') }}</div>
						</div>
						<div class="row-l" v-if="type == 2">
							<img src="@/assets/images/icon/picresour_icon_01.png" class="icon-l" >
							<div class="row-name"> {{ $t('member.points.apply.inventoryPoints') }}</div>
						</div>
					</div>
					<div class="row-wrap">
						<div class="row-l">
              <el-input type="text" v-model="formObj.money" @input="handleMoney()" :placeholder="$t('member.points.apply.numberOfExchanges') "></el-input>
						</div>
						<div class="row-l">
							<div class="row-text">{{showCount?showCount:$t('member.points.apply.numberOfExchanges') }}</div>
						</div>
					</div>
				</div>
        <div class="all">
          <span>{{type == 1?$t('member.points.apply.availableCLP') +'：'+(userInfo.red_credit || 0): $t('member.points.apply.usdtAvailable') +$t('commons.symbol') +'：'+(userInfo.balance || 0)}}</span>
          <el-button type="text" @click="getAll()"> {{ $t('member.points.apply.redeemAll') }}</el-button>
        </div>
        <div class="row-wrap">
          <h6> {{ $t('member.points.apply.paymentPassword') }}</h6>
          <div class="wrap-box">
            <div class="wrap" >
              <el-input type="password" v-model="formObj.pay_password"  :placeholder="$t('member.points.apply.iPaymentPassword') "></el-input>
            </div>
          </div>
        </div>
        <div class="row-footer">
          <el-button size="medium" @click="submitForm()" type="primary">{{type == 1?$t('member.points.apply.exchangeUSDT') +$t('commons.symbol') :$t('member.points.apply.uPoints') }}</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { exchangeIndex , exchange } from '@/api/member/blance'
import { info } from '@/api/member/info';
export default {
  data() {
    return {
      type: this.$route.query.type || 1,
      formObj: {
				from_type: 'usdt', 
				to_type: 'stock_credit',
				money: '',
				pay_password: '',
			},
			showCount: 0,
      exchangeObj: {},
      userInfo: {},
      loading: true,
    };
  },
  created() {
    if(this.type == 1){
			this.formObj.from_type = 'red_credit',
			this.formObj.to_type = 'usdt';
		}
    this.getInfo();
    this.getExchange();
  },
  mounted() {

  },
  methods: {
    getInfo(){
      info()
				.then(res => {
					if (res.code == 0) {
						this.userInfo = res.data;
					}
					this.loading = false;
				})
				.catch(err => {
					this.loading = false;
					this.$message.error(err.message);
				});
    },
    getExchange(){
      exchangeIndex().then(res => {
        if(res.code == 0){
          this.exchangeObj = res.data;
        }
      })
    },
    getAll(){
			this.formObj.money = this.type == 1? this.userInfo.red_credit : this.userInfo.balance;
			this.handleMoney()
		},
    handleMoney(){
      	if(this.formObj.money && Number(this.formObj.money) > 0){
				if(this.type == 1){
					this.showCount =  this.$util.numMulti(Number(this.formObj.money),this.exchangeObj.redcredit_to_usdt_fee) 
				}else {
					this.showCount = this.$util.numMulti(Number(this.formObj.money),this.exchangeObj.usdt_to_stockcredit_fee);
				}
			}else {
				this.showCount = 0;
			}
    },
    submitForm(){
      if(!this.formObj.money){
        return this.$message.error(this.$t('member.points.apply.pleaseEnterTheExchangeAmount'))
      }
      let count = this.type == 1? this.userInfo.red_credit : this.userInfo.balance;
			if(Number(this.formObj.money) > Number(count)){
				return this.$message.error(this.$t('member.points.apply.bnAvailableBalance'))
			}
      if(!this.formObj.pay_password){
        return this.$message.error(this.$t('member.points.apply.iPassword'))
      }
      this.loading = true;
      exchange(this.formObj).then(res=>{
        this.loading = false
        if(res.code == 0){
          this.$message.success(this.$t('member.points.apply.successfulRedemption'))
          this.$back();
        }else {
          this.$message.error(res.message)
        }
      }).catch(err => {
        this.loading = false
        this.$message.error(err.message)
      })
    },
  }
};
</script>

<style lang="scss">
  #points-apply {
    .el-input__inner {
      border: none;
      padding: 0px;
      height: 100%;
    }
  }
</style>

<style scoped lang="scss">
  .content-apply {
    width: 100%;
    background: #fff;
  }
  .header-title {
    width: 100%;
		padding: 18px 20px;
		box-sizing: border-box;
		border-bottom: 1px solid #DCDFE6;
  }
  .apply-row {
    padding-top: 35px;
    display: flex;
    align-items: center;
    flex-direction: column;
    height: 500px;
    .h3 {
      font-size: 13px;
      font-weight: 600;
      color: #FF547B;
      text-align: left;
      width: 460px;
    }
    .row-box {
			width: 460px;
			position: relative;
			.dui-icon {
				width: 74px;
				height: 74px;
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%,-50%);
			}
			.row-wrap {
				width: 100%;
				padding-top: 26px;
				padding-bottom: 11px;
				border-bottom: 2px solid #E8EDF5;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.row-l {
					display: flex;
					align-items: center;
					.icon-l {
						width: 24px;
						height: 24px;
					}
					.el-input {
						font-size: 18px;
						color: #282828;
					}
					.row-name {
						margin-left: 11px;
						font-size: 18px;
						font-weight: 600;
						color: #282828;
					}
					.row-text {
						font-size: 18px;
						color: #BBC0CB;
					}
				}
			}
		}
    .all {
      width: 460px;
      font-size: 12px;
      font-weight: 600;
      color: #282828;
      .el-button {
        font-size: 12px;
        color: #FF547B;
        margin-left: 12px;  
      }
      text-align: left;
    }
    .row-wrap {
      padding-top: 24px;
      text-align: left;
      h6 {
        font-size: 12px;
        color: #868686;
        line-height: 17px;
        margin-bottom: 13px;
        font-weight: normal;
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
      .wrap {
        color: #FF547B;
				width: 460px;
				height: 40px;
				border: 1px solid #DCDFE6;
				border-radius: 4px;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0px 15px;
				box-sizing: border-box;
        .el-input {
          width: 300px;
        }
      }
    }
    .row-footer {
      padding: 35px 0px 30px;
      .el-button {
        width: 460px;
        height: 38px;
      }
    }
  }
</style>
